<template>
    <div class="select-custom">
        <div class="title-box" @click="openSelect">
            <div class="title">{{ getTitle(select_id) }}</div>
            <div class="icon">
                <i
                    :class="
                        is_select_show
                            ? 'el-icon-arrow-up'
                            : ' el-icon-arrow-down'
                    "
                ></i>
            </div>
        </div>
        <div
            class="list-select"
            :class="!is_select_show ? 'list-acitve' : ''"
            :style="{
                backgroundColor: is_select_show
                    ? 'rgba(0, 0, 0, 0.4)'
                    : 'rgba(0, 0, 0, 0)',
                top: `${top_num}px`,
                left: left_num_screen
                    ? !isExpand
                        ? left_num_screen - 168 + 'px'
                        : left_num_screen + 'px'
                    : !isExpand
                    ? 72 + 'px'
                    : 240 + 'px',
                width: w_num_screen ? w_num_screen + 'px' : '',
            }"
            @click="is_select_show = !is_select_show"
        >
            <div
                class="list-box comm-list"
                :style="{ top: is_select_show ? '0' : '-400px' }"
            >
                <div
                    class="list-row"
                    v-for="item in option_list"
                    :key="item.id"
                    :class="false ? 'acitve' : ''"
                    @click="cheOptionvalue(item)"
                >
                    {{ item.name || item.title }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    props: [
        "option_list",
        "select_id",
        "top_num",
        "w_num_screen",
        "left_num_screen",
    ],

    data() {
        return {
            is_select_show: false,
        };
    },
    computed: {
        ...mapGetters(["isExpand"]),
    },
    methods: {
        getTitle(id) {
            let name = "";
            this.option_list.map((v) => {
                if (id == v.id) {
                    name = v.name || v.title;
                }
            });
            return name;
        },
        cheOptionvalue(item) {
            this.$emit("cheOptionvalue", item);
        },
        openSelect() {
            this.is_select_show = !this.is_select_show;
            this.$emit("openSelect");
        },
    },
};
</script>

<style lang="scss" scoped>
.select-custom {
    position: relative;
    .title-box {
        cursor: pointer;
        display: flex;
        font-size: 14px;
        .title {
            margin-right: 5px;
        }
        .icon {
        }
    }
    .list-select {
        width: 345px;
        height: 100%;
        position: fixed;
        left: 240px;
        top: 195px;
        z-index: 1000;
        transition: background 0.3s;
        overflow: hidden;
        &.list-acitve {
            pointer-events: none;
        }
        .list-box {
            width: 100%;
            max-height: 300px;
            overflow: auto;
            transition: all 0.3s;
            background: #f8f8f8;
            position: absolute;
            left: 0;
            top: 0;
            .list-row {
                cursor: pointer;
                font-size: 14px;
                padding: 10px 20px;
                &:hover {
                    background: #ddd;
                }
                &.acitve {
                    color: #459ffd;
                }
            }
        }
    }
}
</style>